<template>
	<!-- v-if
       写法： v-if="表达式"
              v-else-if="表达式"
              v-else
       适用于：切换频率较低场景

       v-show:
       写法：v-show="表达式"
       适用于：切换频率较高场景
       特点：不显示的DOM不会被移除，设置样式不展示style="display: none;"
    -->
	<div class="person">
		<!-- v-show条件渲染 -->
		<h2 v-show="false">欢迎1{{ name }}</h2>
		<h2 v-show="1===1">欢迎2{{ name }}</h2>
		<!-- v-if条件渲染 -->
		<h2 v-if="display">欢迎3{{ name }}</h2>
		<h2 v-if="1===1">欢迎4{{ name }}</h2>
		<hr>
		当前n的值是{{ n }}<br>
		<button @click="n++">点击加1</button>
		<h2 v-if="n===1">Vue</h2>
		<h2 v-else-if="n===2">React</h2>
		<h2 v-else-if="n===3">Angular</h2>
		<h2 v-else>LayUI</h2>
		<hr>
		<h2 v-show="n===1">Vue</h2>
		<h2 v-show="n===2">React</h2>
		<h2 v-show="n===3">Angular</h2>
		<h2 v-show="n===4">LayUI</h2>
        <hr>
		<!--v-if和template配合使用，不会添加标签-->
		<div v-if="n===1">
			<h2>Java</h2>
			<h2>UI</h2>
		</div>
		<template v-if="n===1">
			<h2>Java</h2>
			<h2>UI</h2>
		</template>
	</div>
</template>


<script setup name="Person">
    import {reactive, ref} from "vue";

    let name = ref('zhangsan')
    let display = ref(false)
    let n = ref(1)
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>